Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Functioning IDE for the playground #19

Merged
merged 143 commits into from
May 22, 2018
Merged

Add a Functioning IDE for the playground #19

merged 143 commits into from
May 22, 2018

Conversation

remo5000
Copy link
Contributor

@remo5000 remo5000 commented May 20, 2018

Features added

  • Added slang (hence the numerous file additions)
  • Added a REPL with the same evaluation and clear functionality as source-academy
  • Abstracted the editor and REPL into an IDE container (to maintain reusability)

Issues fixed

Notes:

  • An additional rule of tslint, no-empty has been turned off. We feel that semantically, a no-op is easier to understand with empty curly braces as opposed to null. Input on this would be appreciated, as we can easily reinstate the rule.
  • We violate Redux's suggestion of immutable states in the case of the Source's Context object. Should be okay, since the Context is not used to render anything, and making a deep copy of Context would be slow for large programs.

What's next:

ning-y and others added 30 commits May 14, 2018 10:48
Changes:
- Changed `Playground` component to a statefull one (extends `React.Component)
- add property `playgroundCode` to IApplicationState (bad practice,
change to a slice of the state instead)
- add interface `IPlaygroundProps` to denote the properties passed to
Playground
Once again, this is a WIP. Text typed into the playground editor will
stay in the playground (or rather, appear again) after leaving and
coming back.

Changes:
- added of action, actionCreator (updatePlaygroundCode)
- added a reducer under application's `reducer` function

Possible problems:
- Location of reducer
- Location of playgroundCode stored (as in previous commit)
Made a compromise by including an IPlaygroundState as part of IApplicationProps
This is a copy over of the current state of `./frontend/src/toolchain` at
source-academy/source-academy2 67d9184. It includes only source chapter 1, a new
specification (see [PR 6 at the
source-academy/source-academy2](source-academy/source-academy2#6)
repository).
The react types were added as a result of the `yarn add` command.
remo5000 and others added 13 commits May 21, 2018 10:44
I realised that source academy does not clear the context, and that
clearing only the output is in line with most command-line applications
and REPLs.
This reverts commit 4bd3c44.
Was received from merging master into the branch
Would cause tiny bit of empty space on the right of the page, slightly outside
the viewport.
Okay, so slang's display needs access to the store in order to call dispatch, so
that the display can be output'd in realtime. In the previous commit, this was
achieved by importing the instantiated store from src/index.tsx into
src/slang/stdlib/misc.ts.

This works when the full server is running, but fails with the tests, because
mockContext calls createContext, which imports stdlib/misc, which tries to
import store. But because it's just a test, and store doesn't exist, the test
fails.
Next, change display so that if playground.output array is empty, initialise.
This is because the Output SFC tries to access an undefined output.consoleLogs.

output.consoleLogs is undefined after an Eval button click, because
EVAL_INTERPRETER_(SUCCESS|ERRORS) will try to access the last element of
playground.outputs, but the last element after playground.outputs is always a
CodeOutput for Eval button presses; and CodeOutput doesn't have a consoleLogs
property, so EVAL_INTERPRETER_(SUCCESS|ERRORS) copies over undefined as the new
ResultOutput or ErrorOutput's consoleLog property.
@remo5000 remo5000 mentioned this pull request May 22, 2018
@ning-y ning-y added the blocking Finishing this opens up other stuff label May 22, 2018
@ning-y
Copy link
Member

ning-y commented May 22, 2018

Sorry, we realise this PR is kinda big. Will cut them down in size in the future (~1 issue/PR).

import EditorContainer from '../../containers/IDE/EditorContainer'
import ReplContainer from '../../containers/IDE/ReplContainer'

const IDE: React.SFC<{}> = () => (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe Workspace would be a better name?

In any case, this looks like a container only component for me, so you can even name it like PlaygroundLayout

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created issue #34 for this refactor. Right now there are quite a number of changes directly related to this component, we predict that refactoring the name right now will cause quite a mess. It should be a smoother process once we merge in the changes to IDE and start working on other components (dashboard, etc.) in the future. Meanwhile, we keep track of this as an issue (so it's not forgotten).

...state,
context: createContext()
}
case HANDLE_CONSOLE_LOG:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what's the benefit of grouping console logs. In fact, under certain circumstances this might not be what you want (e.g what if the console log is done asynchronously?)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The intent would be to group the display() outputs of a particular program together in one Card, as compared to one card per output (as in sourceacademy), so as to increase the readability of one's program outputs (code output, displays and then the result).

I did not consider asynchronous outputs previously, it could cause problems with the solution here. @ningyuansg any thoughts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are trying to have one output per program. That is, each program results in exactly one card being displayed (with the exception of CodeOutput).

I recorded a comparison here. The distinction between logs and results/errors will be more prominent after we add text colour with code tags.

The aim is to emulate normal behaviour in most shells. When a program is run, the user is only given back the prompt after stdout/stderr has finished printing their stuff. The area of output between prompts (user $) is analogous to our <Card /> block elements.

Async certainly deviates from this behaviour, but the reducer is smart enough to handle it at least without crashing. Async is also pretty rare in CS1101S. It was present only as a 6th MC sidequest last year, and considering next year's CS1101S is 4 MCs the source language may not need to support async.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@evansb An updated preview of what we're trying to accomplish with the new ui design at 5d546c4: https://youtu.be/acq7FX8-MI0

consoleLogs: [action.payload]
})
} else {
lastOutput.consoleLogs = lastOutput.consoleLogs.concat(action.payload)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this mutates oldstate.output[oldstate.output-1].consoleLogs, which in Redux is an antipattern

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@evansb Fixed at #28

@evansb
Copy link

evansb commented May 22, 2018

Since this PR is blocking, let's resolve the comments later.

Hopefully this will be the last huge PR, in general it's very hard to review but I understand the intent so this is ok

@evansb evansb merged commit bac43d1 into master May 22, 2018
@ning-y ning-y removed the blocking Finishing this opens up other stuff label May 22, 2018
@remo5000 remo5000 mentioned this pull request May 23, 2018
ning-y pushed a commit that referenced this pull request May 26, 2018
According to review from #19.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants